<template>
  <h1>App</h1>
  <p>{{ count }}</p>
  <p>{{ oddOrEven }}</p>
  <p>{{ $store.getters["counter/oddOrEven"] }}</p>
  <button @click="handleIncrement">increment</button>
  <button @click="handleDecrement">decrement</button>
</template>

<script lang="ts">
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

export default {
  name: "App",
  mounted() {
    console.log(this.$store);
  },
  computed: {
    // ...mapState({
    //   count: (state) => state.counter.count,
    // }),
    ...mapState("counter", ["count"]),
    ...mapGetters("counter", ["oddOrEven"]),
  },
  methods: {
    ...mapActions("counter", ["increment"]),
    ...mapMutations("counter", ["DECREMENT"]),
    handleIncrement() {
      this.increment(1);
      // this.$store.dispatch('counter/increment', 1)
    },
    handleDecrement() {
      this.DECREMENT(1);
      // this.$store.commit('counter/DECREMENT', 1)
    },
  },
};
</script>

<style scoped></style>
